<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: wangqiang
 * @Date: 2021-06-25 09:45:07
 * @LastEditors: wangqiang
 * @LastEditTime: 2021-06-25 10:11:41
-->
<template>
  <div class="about">
    <h1 class="test-font">测试使用第三方字体</h1>
    <h1 class="test-font">测试使用第三方字体</h1>
    <h1 class="test-font">测试使用第三方字体</h1>
    <p>多个 v-model使用</p>
    <mutiVModel v-model:password="password" v-model:username="username" />
    <div>绑定的值1：{{ password }}</div>
    <div>绑定的值2：{{ username }}</div>
    <h1>在style中使用变量</h1>
    <Test2 />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import mutiVModel from "../components/Loading.vue";
import Test2 from '../components/Test2.vue'

export default defineComponent({
  name: "Loading",
  components: {
    mutiVModel,
    Test2
  },
  setup() {
    let password = ref("");
    let username = ref("");

    return {
      password,
      username,
    };
  },
});
</script>
<style lang="scss">
// 引入第三方字体文件
@import "../assets/fonts/font.css";

.test-font {
  text-align: center;
  font-size: 30px;
  font-family: "test";
}
</style>
